@function r($px) {
    @return $px/40*1rem;
}

html,
body {
    width: 100%;
    height: 100%;
}

@mixin imgs {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.landfall {
    width: 100%;
    height: 100%;
    background: #222222;
    .landfall_box {
        width: r(500);
        margin: 0 auto;
        padding-top: r(160);
        .landfall_logo {
            width: r(161);
            margin: 0 auto;
            .landfall_logo_img {
                width: r(160);
                height: r(140);
                overflow: hidden;
                position: relative;
                img {
                    @include imgs;
                }
            }
        }
        .landfall_TheInput {
            width: r(500);
            margin: 0 auto;
            display: flex;
            margin-top: r(44);
            .landfall_TheInput_left {
                width: r(60);
                height: r(54);
                overflow: hidden;
                position: relative;
                background: #303030;
                text-align: center;
                i {
                    font-size: r(30);
                    color: #cacaca;
                }
                img {
                    @include imgs;
                }
            }
            .landfall_TheInput_right {
                width: r(440);
                height: r(54);
                font-size: 0;
                input {
                    width: r(380);
                    height: r(54);
                    border: none;
                    padding: 0 r(20) 0 r(40);
                    color: #fff;
                    background: #3d3d3d;
                    font-size: r(20);
                }
            }
        }
        .landfall_cipher {
            width: r(500);
            margin: 0 auto;
            display: flex;
            margin-top: r(16);
            .landfall_TheInput_left {
                width: r(60);
                height: r(54);
                overflow: hidden;
                position: relative;
                background: #303030;
                text-align: center;
                i {
                    font-size: r(30);
                    color: #cacaca;
                }
                img {
                    @include imgs;
                }
            }
            .landfall_TheInput_right {
                width: r(440);
                height: r(54);
                font-size: 0;
                input {
                    width: r(380);
                    height: r(54);
                    border: none;
                    padding: 0 r(20) 0 r(40);
                    color: #fff;
                    background: #3d3d3d;
                    font-size: r(20);
                }
            }
        }
        .landfall_forget {
            display: flex;
            flex-direction: row-reverse;
            .landfall_forget_content {
                font-size: r(20);
                color: #ffffff;
                display: flex;
                align-items: center;
                padding: r(26) r(4);
                i {
                    padding-right: r(6);
                    font-size: r(20);
                    color: #ffffff;
                }
            }
        }
        .landfall_LogInToYourAccount {
            margin-top: r(34);
            .landfall_LogInToYourAccount_box {
                width: r(500);
                height: r(54);
                font-size: r(23);
                color: #cdcdcd;
                text-align: center;
                line-height: r(54);
                background: #b60005;
                margin: 0 auto;
                &:hover{
                    color: #b60005;
                    background: #cdcdcd;
                }
            }
        }
        .landfall_registration {
            margin-top: r(14);
            .landfall_registration_box {
                width: r(496);
                height: r(52);
                font-size: r(23);
                color: #cdcdcd;
                text-align: center;
                line-height: r(54);
                border: 1px solid #B60005;
                background: #303030;
                margin: 0 auto;
            }
        }
    }
}